<template>
  <f7-page>
    <qm-currentcy-navbar title="搜索">
      <template #nav-right>
        <f7-icon f7="ellipsis"></f7-icon>
      </template>
    </qm-currentcy-navbar>

    <qm-search
      placeholder="搜索词"
      v-model="searchKey"
      @search="onSearch"
      shape="round"
      left-icon=""
      clear-trigger="always"
      show-action
    >
      <template #action>
        <div @click="onSearch" style="width: 3em; text-align: center; font-size: var(--font-size-maincontent);color: var(--color-text-main)">搜索</div>
      </template>
    </qm-search>

    <qm-block title="历史搜索">
      <img slot="after-title" @click="clearHistorySearch" src="static/img/search/icon-del2.svg" width="22" height="22" alt="">

      <div class="tag-box">
        <f7-chip
          class="tag"
          v-for="(item, index) in historySearch"
          :key="index"
          :text="item"
        ></f7-chip>
      </div>
    </qm-block>
  </f7-page>
</template>

<script>
export default {
  data() {
    return {
      searchKey: "",
      historySearch: ["民主党", "2021年广州市", "2021年广州市", "2021年广州市"],
    };
  },
  methods: {
    onSearch() {
      if (this.searchKey) {
        this.historySearch.splice(0, 0, this.searchKey);
        this.$f7.toast.show({
          text: `搜索词：${this.searchKey}`,
          closeTimeout: 3000,
          icon: "<i class='f7-icons'>search</i>",
        });
      }
    },
    clearHistorySearch() {
      this.historySearch = [];
    },
  },
};
</script>

<style lang="less" scoped>
.title {
  height: 2em;
  vertical-align: middle;
  margin-top: calc((50px - 12px) * var(--ratio));
  margin-bottom: calc((50px - 40px) * var(--ratio));
  font-size: var(--font-size-maintitle);
  color: var(--color-text-title);
  font-weight: 500;
  .icon {
    float: right;
  }
}

.after-title {
  .icon {
    font-size: calc(44px * var(--ratio));
    color: #9fa7b8;
  }
}
.tag-box {
  margin-top: calc(-20px * var(--ratio));
  margin-bottom: 0;
}
.tag {
  padding: calc(10px * var(--ratio)) calc(20px * var(--ratio));
  height: calc(60px * var(--ratio));
  text-align: center;
  margin: calc(30px * var(--ratio)) calc(24px * var(--ratio)) 0 0;
  text-overflow: ellipsis;
  overflow: hidden;
  font-size: var(--font-size-subcontent);
  color: var(--color-text-main);

  max-width: 100%;
}
</style>
